import React from 'react';
export default class CmtPost extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }
    render() {
        return <div className="well">
            <div className="form-group">
                <input ref={input=>this.state.input=input} type="text" className="form-control" placeholder="评论人" />
            </div>
            <div className="form-group">
                <textarea ref={input=>this.state.textarea=input} className="form-control" placeholder="评论内容" name="" id="" cols="30" rows="10"></textarea>
            </div>
            <div className="form-group">
                <button onClick={()=>this.addComment()} className="btn btn-lg btn-primary">立即发布</button>
            </div>
        </div>
    }

    // 发表评论 
    addComment(){
        const comment={
            id:Date.now().toString().substr(10,3),
            author:this.state.input.value,
            content:this.state.textarea.value,
            posttime:new Date().toLocaleDateString()
        }
        if(comment.author.trim()==''){
            alert('请输入评论人');
            return false;
        }
        if(comment.content.trim()==''){
            alert('请输入评论内容');
            return false;
        }
        
        // 这里的调用的addComment()是redux提供的addComment(action)
        this.props.addComment(comment);

        // 重置表单
        this.state.input.value='';
        this.state.textarea.value='';
    }

    
}